<template>
    <div class="privates">
        <div v-if="privateShow">
            <van-nav-bar :title="$t('my.title')"/>
            <div class="head">
                <van-row type="flex" justify="space-around" align="center" span="24">
                    <img class="hg" v-if="hglist.length < 4" v-for="item in hglist" src="https://nbyuchen.oss-cn-hangzhou.aliyuncs.com/s/164825/g/12529-8138473-200x200.png" alt="">
                    <img class="hg" v-if="hglist.length >3"  src="https://nbyuchen.oss-cn-hangzhou.aliyuncs.com/s/164825/g/12235-8133777-200x200.png" alt="">
                    <van-col v-if="user.phone" style="margin-left:-25px">
                        <p>{{user.phone | phoneReg}}</p>
                    </van-col>
                    <van-col offset="1" v-if="user.email" style="margin-left:-25px">
                        <p>{{user.email}}</p>
                    </van-col>
                    <van-col style="float:right">
                        <button @click="logout">
                            <span>{{$t('my.logout')}}</span>
                        </button>
                    </van-col>
                </van-row>
            </div>
            <div class="privateMain">
                <van-cell @click="showDetail" :to="item.toUrl" v-for="item,index in privateList" is-link  :key="index">
                    <van-icon :name="item.icon" />
                    <p>{{item.title}}</p>
                </van-cell>
            </div>
        </div>
        <div v-else>
            <router-view @_return="_return" @disappear="disappear"/>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        data() {
            return {
                privateList:[
                    {
                        title:this.$t('my.invite_link'),
                        toUrl:'/home/privates/invite',
                        icon:'friends-o'
                    },
                    {
                        title:this.$t('my.invite_record'),
                        toUrl:'/home/privates/record',
                        icon:'orders-o'
                    },
                    // {
                    //     title:this.$t('my.reward'),
                    //     toUrl:'/home/privates/reward',
                    //     icon:'point-gift-o'
                    // },
                    {
                        title:this.$t('my.records'),
                        toUrl:'/home/privates/deal',
                        icon:'location-o'
                    },
                    {
                        title:this.$t('my.safe'),
                        toUrl:'/home/privates/safe',
                        icon:'gold-coin-o'
                    },
                    {
                        title:this.$t('my.language'),
                        toUrl:'/home/privates/language',
                        icon:'setting-o'
                    }
                ],
                privateShow:false,
                hglist:[]
            }
        },
        methods: {
            logout(){
                localStorage.removeItem('user')
                localStorage.removeItem('token')
                this.$router.push('/login')
            },
            disappear(){
                this.privateShow = false
                this.$emit('changeIndex',3)
                this.$emit('tabDisappear',false)
            },
            _return(){
                this.$router.push('/home/privates')
                this.$emit('tabDisappear',true)
                this.$emit('changeIndex',3)
                // this.privateList = []
                // this.privateList = [
                //     {
                //         title:this.$t('my.invite_link'),
                //         toUrl:'/home/privates/invite',
                //     },
                //     {
                //         title:this.$t('my.invite_record'),
                //         toUrl:'/home/privates/record'
                //     },
                //     {
                //         title:this.$t('my.reward'),
                //         toUrl:'/home/privates/reward'
                //     },
                //     {
                //         title:this.$t('my.records'),
                //         toUrl:'/home/privates/deal'
                //     },
                //     {
                //         title:this.$t('my.safe'),
                //         toUrl:'/home/privates/safe'
                //     },
                //     {
                //         title:this.$t('my.language'),
                //         toUrl:'/home/privates/language'
                //     }
                // ]
                this.privateShow = true
            },
            showDetail(){
                this.privateShow = false
                this.$emit('tabDisappear',false)
            }
        },
        created() {
            if(this.$route.path === '/home/privates'){
                this.$emit('changeIndex',3)
                this.privateShow = true
                this.$emit('tabDisappear',true)
            }
        },
        mounted() {
            var that=this
            that.$api.post('Node/mynode')
                .then(res =>{
                    console.log(res)
                    if (res.detail.status === 0) {
                        var lv=res.detail.data.star
                        console.log(lv)
                        that.hglist=[]
                        if(lv>0){
                            for(var i=0;i<lv;i++){
                                that.hglist.push("1");
                             }
                        }else{
                            that.hglist=[]
                        }
                    
                    }else{
                        that.hglist=[]
                    }
                    // that.hglist=['1','1','1']
                    console.log(that.hglist)
                })

        },
        filters:{
            phoneReg(value){
                if(!value) return '0';
                let values = value.substr(0,3)+'-'+value.substr(3,4)+'-'+value.substr(7,4)
                return values;
            }
        },
        computed:{
            ...mapGetters([
                'user',
                'token'
            ]),
        },
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .hg{
        width:20px !important;
        margin-right:-40px;
        margin-left:-20px!important
        float:left
    }
  
    .van-cell:not(:last-child)::after{
        border none
    }
    .van-icon{font-size: 24px;color #262626}
    .head{
        width: 94%;
        background:linear-gradient(90deg,#53d9b5,#2bc299);
        padding: 20px 0;
        margin: 0 auto;
        border-radius 5px
        img{
            width: 40px;
            display: block;
            border-radius: 50%;
        }
        p{
            font-size: 14px;
            color: #2c2c2c;
        }
        button{
            width: 75px;
            height: 30px;
            border: none;
            outline: none;
            background: #22a281;
            color: #fff;
            border-radius: 15px;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
        }
    }
    .van-cell__value--alone
        text-align center
        p
         color #2e2e2e
    .privateMain
        width 94%
        margin 10px auto 0
        .van-cell
            background none !important
            color #2d2d2c
            border-radius 5px
            padding 20px 10px
            margin 0
            margin-bottom 5px
            width 30%
            margin-right 5%
            box-sizing border-box
            display inline-block
            .van-cell__right-icon
                display none
        .van-cell:nth-child(3n)
            margin-right 0%

        

</style>